<template>
  <div class="x-state-box" :class="{warn: data.state === 2}">
    <div class="title-box">
      <span class="state" :class="{close: data.state===0, warn: data.state===2}"></span>
      <span class="title" :class="{warn: data.state === 2}">{{data.title}}</span>
    </div>
    <div class="content">
      <div class="number-box">
        <span class="number" v-animated-number="data.value"></span>
        <span class="unit">{{data.unit}}</span>
      </div>
      <div class="x-chart-box">
        <broken-line :width="colWidth" height="80px" :series-data="chartData"></broken-line>
      </div>
    </div>
    <div class="close-state" v-if="data.state === 0">
      <span>已关闭</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'State',

  props: {
    data: {
      default: null
    }
    // title: {
    //   type: String,
    //   default: '路灯'
    // },
    // state: {
    //   type: Number,
    //   default: 0
    // },
    //
    // value: {
    //   type: Number,
    //   default: 0
    // },
    //
    // unit: {
    //   type: String,
    //   default: ''
    // }
  },

  data () {
    return {
      colWidth: '100px'
    }
  },

  computed: {
    chartData () {
      var result = this.data.chartData || [
        {
          value: 123,
          date: '1'
        },
        {
          value: 1204,
          date: '2'
        },
        {
          value: 124,
          date: '3'
        },
        {
          value: 3204,
          date: '4'
        },
        {
          value: 5124,
          date: '5'
        },
        {
          value: 1204,
          date: '6'
        },
        {
          value: 8124,
          date: '7'
        }
      ]
      return result
    }
  },

  mounted () {
    setTimeout(() => {
      this.colWidth = `${(this.$el.clientWidth / 2)}px`
    }, 0)
  }
}
</script>

<style lang="stylus" scoped>
  .x-state-box {
    width: 100%;
    height: 100%;
    background: #1e1e1e;

    &.warn {
      border: 1px solid red;
    }

    .title-box {
      color: #ccc;
      height: 40px;
      line-height: 40px;
      font-size: 13px;


      .state {
        display: inline-block;
        width: 11px;
        height: 11px;
        background: green;
        margin: 4px 6px 0 10px;

        &.close {
          background: #555;
        }

        &.warn {
          background: red;
        }
      }

      .title {
        &.warn {
          color: red;
        }
      }
    }

    .content {
      width: 100%;
      height: 80px;
    }

    .number-box {
      width: 50%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 14px;
      float: left;
      white-space: nowrap;


      .number {
        font-size: 28px;
      }

      .unit {
        font-size: 14px;
      }
    }

    .x-chart-box {
      width: 50%;
      height: 80px;
      line-height: 80px;
      float: left;
    }

    .close-state {
      height: 20px;
      line-height: 20px;
      position: absolute;
      right: 0;
      top: 10px;
      padding: 3px 3px;
      background: rgba(255,255,255,0.1);
      opacity: 0.4;
    }
  }
</style>
